<template>
	<div class="first-child">
		<h1>这是firstChild</h1>
		<button @click="childToParent">向父组件传值</button>
		<p>子组件显示信息：{{parentToChild}}</p>

    <input type="text" placeholder="请输入文字" v-model="message"><br><br>
    <button @click="showMessage">向组件传值</button>
    <p>{{message}}</p>
	</div>
</template>
 
<script>
import bus from '../assets/js/eventBus'

export default {
  name: 'firstChild',
  data () {
    return {
      message:"我是firstChild"
    }
  },
  props:["parentToChild"],
  methods:{
  	childToParent () {
  		this.$emit("childToParentMsg","这是子组件向父组件传值")
  	},
    showMessage () {
      alert(this.message)
      bus.$emit('userDefinedEvent', this.message)
    }
  }
}
</script>

<style scoped>
.first-child{
  border-bottom: 1px dashed #ddd;
}
</style>
